<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./socket.io.js"></script>
		<link rel="stylesheet" type="text/css" href="./style.css"/>
	</head>
	<body>
		<div class="content">
			<div class="content-left">
				<div class="wenben active" id="wenben2">
					<div class="headtop">
						<h4>私聊聊天室</h4>
						<button id="goback">返回聊天室</button>
					</div>
					<div id="username">私聊聊天室</div>
					<ul id="wenben3"></ul>
				</div>
				<ul class="wenben" id="wenben"></ul>
				<textarea class="shuru" id="shuru"></textarea>
				<div class="fas">
					<button id="fs">确认发送</button>
				</div>
			</div>
			<div class="content-right">
				<div class="login">
					<input type="text" placeholder="请输入您的用户名" id="loginUser">
					<button id="login">登陆</button>
					<ul class="zhushi">
						<li>登陆后才可以发送消息</li>
						<li>登陆后才可以查看客户端对象</li>
						<li>点击某一位客户端就可以私聊</li>
					</ul>
				</div>
				<ul class="loginuser active" id="loginuser1">
					
				</ul>
			</div>
		</div>
		<script src="./socket.js"></script>
		<!-- <div>
			<input id="wenzi" style="width: 200px;height: 80px;"></input>
			<button onclick="test()">发送</button>
		</div>
		<ul id="wenben"></ul> -->
		
		<!-- <script>
			const socket = io('http://localhost:4399');
			
			const wenzi = document.querySelector('#wenzi')
			let wenben = document.querySelector('#wenben')
			
			function test(){
				socket.emit('connection',wenzi.value)
				tianjia(wenzi.value)
			}
			
			socket.on('siliao',(msg)=>{
				tianjia(msg)
			})
			
			function tianjia(message){
				let li = document.createElement('li')
				li.innerHTML = message
				wenben.appendChild(li)
			}
		</script> -->
	</body>
</html>
